<template>
	<view class="test">
		<ul :style="{ width: config.width + 'px', height: config.height + 'px' }">
			<li><span v-if="Math.abs(num) >= 20"></span></li>
			<li><span v-if="Math.abs(num) >= 40"></span></li>
			<li><span v-if="Math.abs(num) >= 60"></span></li>
			<li><span v-if="Math.abs(num) >= 80"></span></li>
			<li><span v-if="Math.abs(num) >= 90"></span></li>
		</ul>
	</view>
</template>
<script>
	export default {
		name: "volume",
		components: {},
		props: {
			//传入百分比数值
			num: {
				type: Number,
				default: 50,
			},
			config: {
				type: Object,
				default: () => ({
					width: 20,
					height: 20,
				}),
			},
		},
	};
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.test {
		width: 30px;
		padding-left: 5px;
		padding-right: 5px;
		// float: left;
	}

	ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;

		li {
			width: 18%;
			background: rgba(0, 0, 0, 0.5);
			position: relative;
			list-style-type: none;

			span {
				position: absolute;
				top: 0;
				left: 0;
				display: inline-block;
				width: 100%;
				height: 100%;
				background: limegreen;
			}

			&:nth-child(1) {
				height: 10px;
				margin-top: 20px;
			}

			&:nth-child(2) {
				height: 13px;
				margin-top: 17px;
			}

			&:nth-child(3) {
				height: 16px;
				margin-top: 14px;
			}

			&:nth-child(4) {
				height: 19px;
				margin-top: 11px;
			}

			&:nth-child(5) {
				height: 22px;
				margin-top: 8px;
			}

		}
	}
</style>